<template>
  <div style="height: 100vh;background-color: #eef2f6">
    <div class="take">
      <div class="logo">
        <img src="/logo.png">
        东南大学融媒体中心
      </div>
      <div class="content">
        <div class="content-title">
          <a-avatar :src="shareUser.avatar" size="large"></a-avatar>
          <div style="margin-left: 10px">
            <div>{{shareUser.username}}</div>
            <div>给您加密分享了文件</div>
          </div>
        </div>
        <div>
          <p class="content-code">请输入提取码:</p>
          <div class="content-flex">
            <a-input style="flex: 1" placeholder="" v-model="code"></a-input>
            <a-button style="margin-left: 10px;" type="primary" @click="queryShareFile">提取文件</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //网盘分享地址
  import {getAction, postAction} from "@/api/manage";

  export default {
    name: "Take",
    data() {
      return {
        urlCode: this.$route.query.urlCode,
        code: '',
        shareUser: {}
      }
    },
    created() {
      this.queryShareUser();
    },
    methods: {
      //分享人信息
      queryShareUser() {
        postAction(`fileBank/share/queryShareUser?urlCode=${this.urlCode}`).then(res => {
          if (res.success) {
            this.shareUser = res.result;
          }
        })
      },
      //分享文件信息
      queryShareFile() {
        if (this.code) {
          postAction(`fileBank/share/queryShareLib?urlCode=${this.urlCode}&code=${this.code}`).then(res => {
            if (res.success) {
              //校验成功，跳转到文件页面
              this.$router.replace({
                path: '/disk/sharefile',
                query: {
                  urlCode: this.urlCode,
                  code: this.code
                }
              })
            }else{
              this.$message.error(res.message);
            }
          })
        } else {
          this.$message.warning('请输入提取码')
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .take {
    width: 400px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -240px 0 0 -230px;
    z-index: 1;
    padding: 30px 0;
  }

  .logo {
    height: 60px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #333333;

    img {
      width: 40px;
    }
  }

  .content {
    border-radius: 8px;
    background-color: white;

    &-title {
      display: flex;
      align-items: center;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      background-color: #0b99e5;
      color: white;
      padding: 20px;
    }

    &-code {
      padding: 0 10px 5px;
      margin: 20px 0 10px;
      color: #666;
      font-weight: 700;
    }

    &-flex {
      padding: 0 10px 20px;
      display: flex;
    }

  }
</style>